<template>
    <Dialog :title="title" :show="true" @close="cancel" :width="350" :height="410" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="prop-panel">
                <div class="dsname" v-if="datasetName" :title="datasetName">
                    数据集：{{ datasetName }}
                </div>
                <div class="tables">
                    <div class="center-table" v-for="(item, index) in property" :key="index">
                        <div class="featureClassName" :title="item.featureClassName">
                            要素类：{{ item.featureClassName }}
                        </div>
                        <el-table :data="item.fields" border :cell-style="cellStyle2"
                            :header-cell-style="cellStyleSmall" :highlight-current-row="false">
                            <el-table-column prop="key" label="字段" :show-overflow-tooltip="true" width="100" />
                            <el-table-column prop="value" label="值" :show-overflow-tooltip="true" width="auto">
                                <template #default="scope">
                                    <div>
                                        <div v-if="scope.row.type == 'String'">
                                            <el-input type="text" v-model.lazy="scope.row.value"
                                                @change="edit(scope.row)" />
                                        </div>
                                        <div v-else-if="scope.row.type == 'Boolean'">
                                            <el-switch v-model="scope.row.value" size="small"
                                                @change="edit(scope.row)" />
                                        </div>
                                        <div v-else-if="scope.row.type == 'Double' || 'Int32' || 'Float'">
                                            <el-input-number v-model="scope.row.value" controls-position="right"
                                                :precision="3" @change="edit(scope.row)" />
                                        </div>
                                        <div v-else>
                                            <el-input type="text" v-model.lazy="scope.row.value"
                                                @change="edit(scope.row)" />
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </Dialog>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { cellStyle2, cellStyleSmall } from "@/scripts/tableStyle";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
createVueDisposer,
toVR
} from "vue-xe2-plugin/dist-node/components/xe2/tools";

const props = withDefaults(defineProps<{ title: string, sceneObject: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel");
};

const uiLeft = document.body.clientWidth - 10 - 340;
// const uiLeft = 10;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

let property: any;

const datasetName = ref("");


const obj = ref<{ [key: string]: any }>({});

const edit = (row: any) => {
    obj.value[row.key] = row.value
}

watch(obj, () => {
    props.sceneObject.props = { ...obj.value }
}, { deep: true })


const init = () => {
    obj.value = {...props.sceneObject.props}
    property = toVR(d, [props.sceneObject, "uiShowprops"])
    datasetName.value = props.sceneObject.datasetName;
}

watch(() => props.sceneObject, () => {
    init()
}, { immediate: true })


onMounted(() => {
});
onBeforeUnmount(() => {
    
});
</script>

<style scoped>
.box {
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.prop-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.dsname {
    font-size: 18px;
    padding: 0 0 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.featureClassName {
    font-size: 14px;
    padding: 5px 0 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tables {
    /* max-height: 300px; */
    height: 91%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
}

.el-input-number {
    width: 184px;
    height: 25px;
    text-align: left;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: transparent !important;
    color: #333 !important;

}

:deep(.el-input-number .el-input__inner) {
    text-align: left !important;
}

:deep(.el-input-number.is-controls-right .el-input__wrapper) {
    padding-left: 11px;
}


:deep(.el-input-number.is-controls-right .el-input-number__increase,
    .el-input-number.is-controls-right .el-input-number__decrease,
    .el-input-number.is-controls-right .el-input-number__increase) {
    --el-input-number-controls-height: 11px !important;
    height: 11px !important;
}

.submit {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.el-input {
    height: 25px;
}
</style>
